import React from 'react';
// 引入 connect 工具函数
import { connect } from 'dva';
import SearchPanel from './SearchPanel'
import DataTable from './DataTable'
import AddEditForm from './AddEditForm'
import { FormattedMessage, getLocale } from 'umi/locale';

import styles from './index.less';

const UserIndex = ({ dispatch, users }) => {

  const { inputValue, selectValue, loading } = users
  const { list, total, current, pageSize } = users
  const { modalVisible, modalType, currentItem } = users
  const onOpenModal = (id) => {
    console.log('id', id)
    dispatch({
      type: 'users/showModal'
    })
  }
  const searchPanelProps = {
    onOpenModal,
    onInputSearch() {
      if (!loading) {
        dispatch({
          type: 'users/query'
        })
      }
    },
    onSearchBtnClick() {
      if (!loading) {
        dispatch({
          type: 'users/query'
        })
      }
    },
    onSelectChange(changeValue) {
      dispatch({
        type: 'users/query',
        selectValue: changeValue
      })
    },
    onInputChange(e) {
      if (!loading) {
        dispatch({
          type: 'users/changeInput',
          inputValue: e.target.value
        })
      }
    },
    inputValue: inputValue,
    selectValue: selectValue,
    loading: loading
  }

  const dataTableProps = {
    list,
    total,
    pageSize,
    current,
    loading,
    onOpenModal,
    onTableChange({ current }, filters, sorter) {
      dispatch({
        type: 'users/query',
        pagination: { current, pageSize }
      })
    }
  }

  const addEditFormProps = {
    loading,
    modalVisible,
    onHideModal() {
      dispatch({
        type: 'users/hideModal'
      })
    },
    onFormSubmit(values, resolve) {
      dispatch({
        type: 'users/create',
        formData: values,
        resolve
      })
    }
  }

  return (
    <div className={ styles.container }>
      <FormattedMessage id="china"/>
      <p>Locale: &nbsp;{ getLocale() }</p>
      <SearchPanel { ...searchPanelProps }/>
      <DataTable { ...dataTableProps } />
      <AddEditForm { ...addEditFormProps }/>
    </div>
  );
}

function mapStateToProps({ users }) {
  return { users }
}

export default connect(mapStateToProps)(UserIndex)
